<template>
  <div class="article-container">
  	<div class="row" v-if="product">
      <div class="large-12 columns">
        <swiper :options="swiperOption" class="gallery-top">
          <swiper-slide v-for="(slide, index) in product.productImageUrls" :key="index">
            <div class="swiper-zoom-container">
              <picture>
                <!--[if IE 9]><video style="display: none;"><![endif]-->
                <source :srcset="slide.bigImageUrl" media="(min-width: 600px)">
                <!--[if IE 9]></video><![endif]-->
                <img :src="slide.smallImageUrl" alt="" class="swiper-lazy">
              </picture>
              
              <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"><a></a></div>
          <div class="swiper-button-next" slot="button-next"><a></a></div>
        </swiper>
      </div>
      <div class="large-12 columns info">
        <h2>{{product.name}}</h2>
        <div class="media-object">
          <div class="media-object-section shrink">
            酒精度：
          </div>
          <div class="media-object-section">
            {{product.alcoholicStrength}} 度
          </div>
        </div>
        <div class="media-object">
          <div class="media-object-section shrink">
            规格：
          </div>
          <div class="media-object-section">
            {{product.standard}}
          </div>
        </div>
        <div class="media-object">
          <div class="media-object-section shrink">
            产品特点：
          </div>
          <div class="media-object-section">
            {{product.description}}
          </div>
        </div>
      </div>
    </div>
    <div class="row" v-if="product">
      <div class="large-24 column">
        <section class="content">
          <h3>产品详情</h3>
          <div class="margin-t" v-html="product.content"></div>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
require('@/assets/css/swiper.min.css')
import { mapState } from 'vuex'
export default {
  data () {
    return {
      productVisible: false,
      swiperSlides: [],
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        preloadImages: false,
        lazyLoading: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
        onTransitionStart (swiper) {
//          console.log(swiper)
        },
        onSlideChangeEnd: swiper => {
//          console.log('onSlideChangeEnd', swiper.realIndex)
        }
      }
    }
  },
  props: {
    datas: Object,
    dialogVisible: Boolean,
    arId: null
  },
  computed: {
    ...mapState({
      product: state => state.product,
    })
  },
  mounted () {
    var arId = this.$route.params.arId
    this.$store.dispatch('FETCH_PRODUCT', arId)
  },
  watch: {
  },
  created () {
  },
  methods: {
  }
}
</script>
<style>
@import 'css/variable.css';
.product-preview{
  min-height: 400px;
  transition: all .3s;
  width: 100%;
  max-width: 800px;
  & .el-dialog__header{
    padding: 0;
  }
  & .content{
    padding:1rem;
    & p{
      text-indent: 0;
    }
    & > div{
      padding: 1rem 0;
    }
  }
  & .el-dialog__headerbtn{
    margin: 1rem 1rem 0 0;
  }
}
@media only screen and (max-width: 768px) {
  .product-preview.el-dialog--small{
    width: 100%;
    top: 0;
  }
}
.article-container{
  padding: 2rem;
  & .content{
    padding: 2rem 0 0;
  }
}
</style>
